<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{name}}<!-- 该标签会被vue渲染，直接使用data中的name值 -->
        <h1>{{name}}在{{year}}-{{mouth}}-{{day + 2+3}}这一天</h1>
        <h2>{{name}}她有没有男朋友？{{boyfrind.name}};她有什么要求？岁数在{{boyfrind.age}}</h2>
        <h3 v-text="name">{{name}}她有没有男朋友？{{boyfrind.name}};</h3>
    </div>
    {{name}}<!-- 该标签不会被vue渲染直接会显示出来 -->
    <script>
        const vm = new Vue({
            //绑定到上面view页面中的dom节点，该节点内部就可以使用vue的组件
           el:"#app", 
           data() {
               return {
                   name:"雷老师",
                   year:"2022",
                   mouth:"04",
                   day:9,
                   boyfrind:{
                       name:"还没",
                       age:"0~18岁"
                   }
               }
           },
        });
    </script>
</body>

</html>